<template>
  <div>
    <el-card>
      <el-table :data="spuList" style="width: 100%" border>
        <el-table-column label="序号" width="80" align="center" type="index"> </el-table-column>
        <el-table-column prop="skuName" label="名称" width="180"> </el-table-column>
        <el-table-column prop="skuDesc" label="描述"> </el-table-column>
        <el-table-column label="默认图片">
          <template v-slot="{ row }">
            <el-image :src="row.skuDefaultImg" style="width: 100px; height: 100px" fit="fill">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="weight" label="重量(KG)"> </el-table-column>
        <el-table-column prop="price" label="价格(元)"> </el-table-column>
        <el-table-column prop="address" label="操作" width="200">
          <template v-slot="{ row }">
            <el-button
              @click="skuOnLine(row)"
              :type="row.isSale == '1' ? onDown.downLine.color : onDown.online.color"
              size="mini"
              class="button"
              ><i
                class="icon"
                :class="row.isSale == '1' ? onDown.downLine.icon : onDown.online.icon"
              ></i
            ></el-button>
            <el-button type="primary" size="mini" class="button" @click="skuEdit"
              ><i class="el-icon-edit-outline icon"></i
            ></el-button>
            <el-button type="info" size="mini" class="button" @click="skuInfo"
              ><i class="el-icon-info icon"></i
            ></el-button>
            <el-button type="danger" size="mini" class="button" @click="skuDelete(row.id)"
              ><i class="el-icon-delete icon"></i
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="page"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[10, 15, 20, 30]"
        :page-size="limit"
        layout=" prev, pager, next, jumper,->,sizes,total"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { reqSkuList, reqCancelSale, reqOnSale, reqDeleteSku } from '@/api/sku'
export default {
  name: 'Sku',
  data() {
    return {
      onDown: {
        online: {
          color: 'info',
          icon: 'el-icon-arrow-up'
        },
        downLine: {
          icon: 'el-icon-arrow-down',

          color: 'success'
        }
      },
      spuList: [],
      page: 1,
      limit: 10,
      total: 10
    }
  },
  mounted() {
    this.request()
  },
  methods: {
    handleSizeChange(val) {
      this.limit = val
      this.request()
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.page = val
      this.request()
      console.log(`当前页: ${val}`)
    },
    async request() {
      const { page, limit } = this
      const result = await reqSkuList(page, limit)
      this.spuList = result.data.records
      this.total = result.data.total
    },
    async skuOnLine(row) {
      const { isSale, id } = row
      if (isSale == 1) {
        await reqCancelSale(id)
        this.$message.success('sku下线成功')
      } else {
        await reqOnSale(id)
        this.$message.success('sku上线成功')
      }
      this.request()
    },
    async skuDelete(id) {
      await reqDeleteSku(id)
      this.$message.success('删除sku成功!!!')
      this.request()
    },
    skuEdit() {
      this.$message('功能正在实现中...')
    },
    skuInfo() {
      this.$message('功能正在实现中...')
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  margin-top: 10px;
}
.image-slot {
  width: 100px;
  height: 100px;
  background-color: red;
  i {
    font-size: 24px;
    // margin-left: 75px;
    margin-top: 40px;
  }
}
</style>
